<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的优惠券</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
		<!--自定义css-->
		<link rel="stylesheet" href="../css/myCoupon.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
			.mui-control-content {
				background-color: white;
				min-height: 360px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
		.detail-article{width: 100%; overflow: hidden; background-color: #fff}
        .detail-article nav{ width: 100%;}
        .detail-article nav ul{ width: 100%; padding:5% 0; overflow: hidden; display: table;margin:0 auto;}
        .detail-article nav ul li{ display: table-cell; width: 33.333333%; text-align: center; font-size:15px; color: #585959; border-bottom:solid 1px #C3C3C3; padding: 2% 0;  }        
        .detail-article nav ul .article-active{ border-bottom:2px solid #F14E41; color:#F14E41;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view all-top">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的优惠券</h1>
			<a id='showUserPicker' class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--tab-->
	    <article class="detail-article" style="margin-top: 2rem;">
				<nav>
					<ul class="article">
						<li id="talkbox1" class="article-active">待使用</li>
						<li id="talkbox2" >已过期</li>
						<li id="talkbox3">已使用</li>
					</ul>
				</nav>
				<section class="talkbox1" style="margin-top: -1rem;">					
					<div class="coupon">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                   	 截止日期<br>
							                    2216-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							    
								<div class="coupon">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                   	 截止日期<br>
							                    2216-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							  
								<div class="coupon">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                   	 截止日期<br>
							                    2216-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							    
								<div class="coupon">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                   	 截止日期<br>
							                    2216-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							   
								<div class="coupon">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                   	 截止日期<br>
							                    2216-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
				</section>
				<section class="talkbox2" style="display: none; margin-top: -1rem;">					
                    <div class="coupon coupon-diabled">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                    截止日期<br>
							                    2016-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							    
								<div class="coupon coupon-diabled">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                    截止日期<br>
							                    2016-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							    
								<div class="coupon coupon-diabled">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                    截止日期<br>
							                    2016-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
				</section>
				<section class="talkbox3" style="display: none; margin-top: -1rem;">					
                    <div class="coupon coupon-used">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                    截止日期<br>
							                    2016-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
							   
								<div class="coupon coupon-used">
							        <div class="coupon-left">
							            <div class="coupon-inner">
							                <div class="coupon-money">
							                    <span>¥</span>
							                    <span class="sum">100.00</span>
							                </div>
							                <div class="coupon-condition">
							                    <span>满200.00可用</span>
							                </div>
							            </div>
							        </div>
							        <div class="coupon-right">
							            <div class="coupon-inner">
							                <div class="coupon-time">
							                    截止日期<br>
							                    2016-12-31
							                </div>
							                <i class="coupon-circle top"></i>
							                <i class="coupon-circle bottom"></i>
							            </div>
							        </div>
							        <div class="coupon-light"></div>
							    </div>
				</section>				
			</article>
		
<script type="text/javascript">
	$(function(){
		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
				$('.talkbox3').hide();
			}else if($(this).attr("id")=="talkbox2"){
				$('.talkbox2').show();
				$('.talkbox1').hide();
			    $('.talkbox3').hide();
			}else{
				$('.talkbox3').show();
				$('.talkbox1').hide();
				$('.talkbox2').hide();
			}

		});	
	});
</script>		
		
		
	</body>
</html>